<template>
  <inject-template :item="item" :pageId="pageId" :popId="popId" :isHiddenComp="isHiddenComp">
    <template v-slot:common>
      <div class="wb-common-list" ref="commonList" :style="listStyle">
        <div v-if="commonAttr.isHeader" @click.stop class="header" ref="header" style="padding:2% 6%;color:#fff;fontSize:0.32rem" v-html="headerHtml"></div>
        <!-- <div v-if="commonAttr.isHeader" @click.stop class="header" ref="header" style="padding:2% 6%;color:#fff;fontSize:0.32rem">
          <p style="">班级1</p>
          <div style="" class="header-con">
            <p style="30%">热度值：<span>{{numberItemData.data.num}}</span></p>
            <div style="width:20%" @click.stop="onListHeader"><img src="https://static.hd.xxx.com/upload/biz/14/994150.png"></div>
          </div>
        </div> -->
        <ul :data-id="getCheckboxItemIdByItemType" ref="list" class="wb-common-list-ul">
          <li v-for="(item_, index) in wbListOrLists" :key="index" @click="onEmitSlideChange($event, index)" :style="itemColumnStyle">
            <component :ref="setItemRef" :is="commonAttr.itemType" :item="item" :index="index" :style="itemConStyle" v-on:adjustCommomListHeight="onAdjustCommomListHeight"></component>
          </li>
        </ul>

        <div v-if="commonAttr.isFooter" @click.stop="onChangeListNum" ref="footer" class="footer" style="padding:2% 6%;color:#fff;fontSize:0.32rem" v-html="footerHtml"></div>
        <!-- <div v-if="commonAttr.isFooter" @click.stop="onChangeListNum" ref="footer" class="footer" style="padding:2% 6%;color:#fff;fontSize:0.32rem">
          <img src="https://static.hd.xxx.com/upload/biz/14/994150.png" style="width:20%">
        </div> -->
      </div>
    </template>
  </inject-template>
</template>

<script>
import InjectTemplate from '@/components/inject-template.vue'
import { defineAsyncComponent } from 'vue'
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { CONTROL_TYPES } from '@/common/const'
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { COMMON_ITEM_TYPE_MAP } from '@/common/const-items'
import { COMMON_ITEM_STYLE_TYPE_MAP } from '@/common/const-items'
import { EventBus } from '@/store/index'
import { bgPositionStyle } from '@/store/utils'
import { onBeforeUpdate } from 'vue'
import { getPxOVwByValue } from '@/store/utils'

const components = {
  InjectTemplate,
  WbItemCommon: defineAsyncComponent(() => import('@/components/items/wb-item-common.vue')),
  WbItemCheckbox: defineAsyncComponent(() => import('@/components/items/wb-item-checkbox.vue')),
  WbBigImg: defineAsyncComponent(() => import('@/components/items/wb-big-img.vue')),
  WbItemJudgeRightWrong: defineAsyncComponent(() => import('@/components/items/wb-item-judge-right-wrong.vue')),
  WbItemQsdsVote: defineAsyncComponent(() => import('@/components/items/wb-item-qsds-vote.vue')),
  WbItemHeaderFooter: defineAsyncComponent(() => import('@/components/items/wb-item-header-footer.vue')),
}
export default {
  name: 'WbCommonList',
  mixins: [utils, commonUtils],
  setup(props) {
    let itemRefs = []
    const setItemRef = el => {
      itemRefs.push(el)
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    let state = {
      itemRefs,
      setItemRef,
      isHiddenComp: true,
      COMMON_ITEM_TYPE_MAP: COMMON_ITEM_TYPE_MAP,
    }

    if(props.item.commonAttr.itemType == COMMON_ITEM_TYPE_MAP.checkbox){
      state.selecteds = []
    }
    return state
  },
  components,
  created() {
    if (!this.isH5Edit) {
      if(this.item.btn.commonAttr.isSelected_){
        let commonAttr = this.item.btn.commonAttr
        let styles = this.item.btn.styles
        commonAttr.color = styles.color
        commonAttr.backgroundColor = styles.backgroundColor
      }
    }
  },
  computed: {
    getCheckboxItemIdByItemType(){
      if(this.commonAttr.itemType == COMMON_ITEM_TYPE_MAP.checkbox){
        return this.item.id
      }else{
        return 0
      }
    },
    itemColumnStyle(){
      let commonAttr = this.item.commonAttr
      let styles_ = {}
      if(commonAttr.columnNum > 0){
        styles_.width = this.COLUMN_PERCENT[commonAttr.columnNum]
      }
      // styles_.margin = commonAttr.itemMarginTB + unit + ' ' + 0 + unit
      return styles_
    },
    headerHtml(){
      let html = this.commonAttr.headerHtml;
      html = html.replace(/《/g, "<");
      html = html.replace(/》/g, ">");
      html = html.replace(/{{num}}/, this.numberItemData.data.num);
      return html;
    },
    footerHtml(){
      let html = this.commonAttr.footerHtml;
      html = html.replace(/《/g, "<");
      html = html.replace(/》/g, ">");
      html = html.replace(/{{num}}/, this.numberItemData.data.num);
      return html;
    },
    listStyle(){
      let styles_ = this.styles
      styles_.width = "inherit"
      if(this.isH5Edit){
        styles_.height = "inherit"
      }
      if(this.item.commonAttr.bgUrl && this.item.commonAttr.bgUrl.length > 0) { 
        styles_.backgroundImage = 'url(' + this.item.commonAttr.bgUrl + ')'
        bgPositionStyle(styles_, this.item.commonAttr.bgPositionRepeatType)
      }
      if(this.item.commonAttr.styleType == COMMON_ITEM_STYLE_TYPE_MAP.jd){
        styles_['border-radius'] = getPxOVwByValue(70)
        styles_['padding-top'] = getPxOVwByValue(10)
        styles_['padding-bottom'] = getPxOVwByValue(120)
      }
      return styles_
    },
  },
  mounted(){
    if(!this.isH5Edit){
      this.reset()
      window.setTimeout(() => {
        this.adjustHei()
      }, 50)
    }
  },
  methods: {
    onChangeListNum(){
      let lists_;
      if(this.isWbLists){
        lists_ = this.wbLists;
      }else{
        lists_ = this.lists;
      }
      this.$store.commit('updateComponentAttr', {id: this.item.id, commonAttr:{itemNum:lists_.length}});
      window.setTimeout( ()=> {
        EventBus.$emit('adjustListTopAndPageHeight')
      }, 50 );
    },
    onAdjustCommomListHeight(){
      this.adjustHei();
      window.setTimeout(()=> {
        EventBus.$emit('adjustListTopAndPageHeight')
      }, 50 );
    },
    adjustHei(){
      if(this.commonAttr.isAutoY){
        let listHei =  this.$refs.list.offsetHeight
        if(this.commonAttr.isHeader){
          let headerHei =  this.$refs.header.offsetHeight
          listHei += headerHei
        }
        if(this.commonAttr.isFooter){
          let footerHei =  this.$refs.footer.offsetHeight
          listHei += footerHei
        }
        listHei = parseInt(listHei*MOBILE_WID_HEI.adaptiveScale)
        this.$store.commit('updateComponentAttr', {id:this.item.id, conAttr:{height_:listHei}, conStyles:{height:getPxOVwByValue(listHei)}});
      }
    },
    onListHeader(){
      EventBus.$emit("itemClick", {id: this.item.id, index: -1})
    },
    onEmitSlideChange(e, index){
      if(this.isH5Edit){
        return
      }
      this.commonAttr.itemIndex = index

      let itemType = this.item.commonAttr.itemType
      if(itemType == COMMON_ITEM_TYPE_MAP.common){
          let className = e.target.classList[0]
          if(className == "wb-item-common"){
            e.stopPropagation()
            let itemData = this.wbListOrLists[index]
            if(itemData.link && itemData.link.length > 0){
              this.openLinkBySelfUrl(itemData.link);
            }
          }else{
            return
          }
        //转发博文
      }else if(itemType == COMMON_ITEM_TYPE_MAP.qsdsVote) {
        // 转发博文
        // 有序发博
        let pushControlData = this.getItemControls[CONTROL_TYPES.wb_push] && this.getItemControls[CONTROL_TYPES.wb_push].data;
        if(pushControlData && pushControlData.elements && pushControlData.elements.length > 0) {
          let elem = null;
          let targetItem = this.wbListOrLists[index];
          let itemIndex = parseInt(targetItem.voteId) - 1;
          for(let i = 0, len = pushControlData.elements.length; i < len; i++){
            elem = pushControlData.elements[i];
            if(elem.mid && elem.mid === targetItem.mid) {
              this.commonAttr.pushIndex = i;
              break;
            }else if(i == itemIndex){
              this.commonAttr.pushIndex = i;
              break;
            }
          }
        }
      }else if(itemType == COMMON_ITEM_TYPE_MAP.checkbox){
        e.stopPropagation()
        this.itemRefs[index].onCheckbox(e, index)
        //表单提交
        let index_ = this.selecteds.indexOf(index+1)
        const isSelected = this.itemRefs[index].isSelected
        if(isSelected){
          if(index_ == -1){
            this.selecteds.push(index+1)
          }
        }else{
          if(index_ != -1){
            this.selecteds.splice(index_, 1)
          }
        }
        let lists = this.wbListOrLists
        this.$store.commit('updateFormValue', {id:this.item.id, selecteds: this.selecteds, lists})

      }else if(itemType == COMMON_ITEM_TYPE_MAP.judge){
        e.stopPropagation()
        this.reset()
        _.forEach(this.itemRefs, (component) => {
          if(component.index == index){
            component.isSelected = true
          }
        })
        this.itemRefs[index].onJudge(e, index)
      }else{
        e.stopPropagation()
      }
      let jumpUrl = 'item_' + index
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    reset(){
      if(this.isH5Edit){
        return
      }
      let itemType = this.item.commonAttr.itemType
      if(itemType == COMMON_ITEM_TYPE_MAP.judge){
         _.forEach(this.itemRefs, (item) => {
          item.resetData();
        })
        this.$store.commit('resetVisibleComponents_')
      }else if(itemType == COMMON_ITEM_TYPE_MAP.checkbox){
        this.selecteds = [];
      }
    },
  },
  updated(){
    if(!this.isH5Edit){
      this.adjustHei()
    }
  },
  beforeUnmount(){
    if(this.isH5Edit){
      this.reset()
    }
    this.item.commonAttr.isLoadedImg = false;
    this.selecteds = null;
  },
};
</script>

<style lang="scss">
.wb-common-list{
  height: inherit;
  display: flex;
  flex-direction: row;
  flex: auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  background-size: contain;
  width: inherit;

  .header{
    width: inherit;
    .header-con{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    img{
      width: 100%;
      object-fit: contain;
    }
  }
  .footer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    img{
      object-fit: contain;
    }
  }
  ul{
    width: inherit;
    li{
      display: inline-block;
      position: relative;

      .group-img{
        width: 100%;
        object-fit: contain;
        opacity: 0;
      }
    }
  }
}
</style>
